<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:replace="~{commons/adminCommon::adminHead('西安旅游电子票务后台')}">
        <title>西安旅游电子票务后台</title>
    </head>

    <body>
        <nav th:replace="~{commons/adminCommon::navHead}"></nav>

        <div class="container-fluid">
            <div class="row">
                <nav th:replace="~{commons/adminCommon::navbar(4)}"></nav>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                    <h2>订单管理</h2>
                    <hr>
                    <div class="row m-3">
                        <div class="col">
                            <a th:href="@{/admin/orders}" href="#"
                               class="btn btn-primary btn-sm mb-1">显示全部订单</a>
                            <form th:action="@{/admin/order/search}" method="get"
                                  class="form-inline d-inline-block float-right">
                                <input type="text" class="form-control-sm" id="query" name="query"
                                       placeholder="请输入景点名称或订单流水号" style="width: 250px">
                                <input type="submit" value="搜索订单" class="btn btn-info btn-sm mb-1"/>
                            </form>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>景点名称</th>
                                    <th>用户昵称</th>
                                    <th>用户姓名</th>
                                    <th>用户手机号</th>
                                    <th>门票使用时间</th>
                                    <th>订单流水号</th>
                                    <th>订单金额</th>
                                    <th>订单状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="order, stat : ${orderPage.records}">
                                    <td th:text="${stat.index + 1}">1</td>
                                    <td th:text="${order.siteScenic.siteName}">华山</td>
                                    <td th:text="${order.user.userNickname}">阿骏</td>
                                    <td th:text="${order.user.userRealName}">李哥</td>
                                    <td th:text="${order.user.userPhone}">12345678911</td>
                                    <td th:text="${#temporals.format(order.orderUseTime, 'yyyy-MM-dd HH:mm')}">
                                        2020-7-5 08:00
                                    </td>
                                    <td th:text="${order.orderSequence}">640fde83cc734a96bd77aa92f8b5ee6c</td>
                                    <td>￥<span th:text="${order.orderPrice}">1000</span></td>
                                    <td th:class="${order.orderStatus ? 'text-primary' : 'text-warning'}"
                                        th:text="${order.orderStatus ? '已支付' : '未支付'}">已支付
                                    </td>
                                    <td>
                                        <button th:onclick="deleteOrder([[${order.orderId}]])"
                                                class="btn btn-danger btn-sm">删除
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <h3 th:if="${orderPage.records.isEmpty()}" th:text="${searchMsg}"
                            class="text-danger text-center"></h3>
                        <nav aria-label="Page navigation example" class="mt-3 float-right"
                             th:object="${orderPage}" th:if="${orderPage.pages > 1}">
                            <ul class="pagination">
                                <li class="page-item" th:classappend="*{!hasPrevious()} ? 'disabled' : ''">
                                    <a class="page-link" th:href="@{/admin/orders(page=1)}" aria-label="Previous">首页</a>
                                </li>
                                <li class="page-item" th:classappend="*{hasPrevious()} ? '' : 'disabled'">
                                    <a class="page-link" th:if="*{(current - 1) > 0}"
                                       th:href="@{/admin/orders(page=*{current}-1)}"
                                       aria-label="Previous">上一页</a>
                                    <a class="page-link" th:if="*{(current - 1) <= 0}"
                                       th:href="@{/admin/orders(page=1)}"
                                       aria-label="Previous">上一页</a>
                                </li>
                                <li class="page-item" th:each="page : *{#numbers.sequence(1, pages)}"
                                    th:classappend="(${page}==*{current})?'active':''">
                                    <a class="page-link" th:href="@{/admin/orders(page=${page})}"
                                       th:text="${page}">1</a>
                                </li>
                                <li class="page-item" th:classappend="*{hasNext()} ? '' : 'disabled'">
                                    <a class="page-link" th:if="*{(current + 1) < pages}"
                                       th:href="@{/admin/orders(page=*{current}+1)}"
                                       aria-label="Previous">下一页</a>
                                    <a class="page-link" th:if="*{(current + 1) >= pages}"
                                       th:href="@{/admin/orders(page=*{pages})}"
                                       aria-label="Previous">下一页</a>
                                </li>
                                <li class="page-item" th:classappend="*{!hasNext()} ? 'disabled' : ''">
                                    <a class="page-link" th:href="@{/admin/orders(page=*{pages})}"
                                       aria-label="Previous">末页</a>
                                </li>
                            </ul>
                            <div class="text-primary text-center">
                                <span>第 <span th:text="*{current}">1</span> 页</span>
                                /
                                <span>共 <span th:text="*{pages}">10</span> 页</span>
                            </div>
                        </nav>
                    </div>
                </main>
            </div>
        </div>

        <th:block th:replace="~{commons/adminCommon::commonJs}"/>
        <script th:inline="javascript">
            // 删除订单
            function deleteOrder(orderId) {
                bootstrapQ.confirm({title: "警告", msg: '此操作将永久删除此订单，确认删除?'},
                    function () {
                        let req = {};
                        req.orderId = orderId;
                        $.ajax({
                            url: /*[[@{/order/deleteOrder.do}]]*/'',
                            method: 'POST',
                            dataType: 'json',
                            data: JSON.stringify(req),
                            contentType: 'application/json;charset=utf-8',
                            processData: false,
                            success: function (resp) {
                                if (resp.success) {
                                    alert(resp.message);
                                    location.reload();
                                } else {
                                    bootstrapQ.msg({msg: resp.message, type: 'warning', time: 3000});
                                }
                            },
                            error: function (error) {
                                bootstrapQ.msg({msg: resp.message, type: 'danger', time: 3000});
                            }
                        })
                    }
                );
            }
        </script>
    </body>
</html>